<!--
 * @Author: zhangjingyu
 * @Date: 2020-10-22 19:29:55
 * @LastEditors: zhangjingyu
 * @LastEditTime: 2021-04-21 16:28:02
 * @FilePath: \vprisk10.14\src\components\onlyOneSearch.vue
 * @Description: 
-->
<template>
  <!-- 单项搜索组件 -->
  <div class="onlyOneSearch">
    <el-input
      v-model="searchText"
      :placeholder="placeholder"
      @input="keyup"
      clearable
      @keydown.enter.native="searchMethod"
    ></el-input>
    <div class="iconbox" @click="searchMethod">
      <i class="iconfont icon-sousuo"></i>
    </div>
  </div>
</template>

<script>
export default {
  name: "onlyOneSearch",
  model: [
    {
      prop: "value",
      event: "input"
    }
  ],
  props: {
    value: {
      type: String,
      default: ""
    },
    placeholder: {
      type: String,
      default: "请输入名称"
    },
    searchMethod: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      searchText: ""
    };
  },
  methods: {
    keyup(e) {
      this.$emit("input", e);
    }
  }
};
</script>

<style lang="scss" scoped>
.onlyOneSearch {
  width: 167px;
  height: 32px;
  vertical-align: middle;
  display: flex;
  font-size: 16px;
  color: #e6eaf3;
  border-radius: 4px;
  border: 1px solid #d5dced;
  margin-bottom: 10px;
  input {
    width: 135px;
    background-color: transparent;
    border: none;
    outline: none;
    ::placeholder {
      color: #fff;
    }
  }
  .iconbox {
    text-align: center;
    vertical-align: middle;
    line-height: 27px;
    width: 40px;
    height: 100%;
    transition: all 0.3s;
    border-left: 1px solid #d5dced;
    cursor: pointer;
    .iconfont .icon-sousuo {
      width: 31px;
    }
  }
  /deep/.el-input__inner {
    border: none !important;
    background-color: transparent;
    font-size: 12px;
    padding-left: 15px;
    border-right: 1px solid #d5dced;
    color: #fff;
  }
  /deep/.el-popper[x-placement^="left"] .popper__arrow::after {
    border-left-color: #393b3e !important;
  }
}
</style>